<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;padding-left: 80rpx;">
				個人資料
			</view>
			<!-- <view style="width: 120rpx;border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #F6F8FA;text-align: center;color: #BEC0C5;">
				儲存
			</view> -->
			<view style="width: 120rpx;">
				
			</view>
		</view>
		
		<view style="margin-top: 32rpx; width: 100%;display: flex;justify-content: center;align-items: center;">
			<view style="position: relative;">
				<u-image
					:src="form.avatar"
					width="200rpx"
					height="200rpx"
					shape="circle"
				></u-image>
				<view style="position: absolute; bottom: 0; right: 0;background-color: #FFF;padding: 16rpx;border-radius: 16rpx;" @tap.stop="chooseImg('avatar')">
					<u-image
						src="/static/images/icon/upload.png"
						width="32rpx"
						height="32rpx"
					></u-image>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">ORID</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.orid}}</view>
					</view>
				</view>
				<view @click="edit(1)">
					<u-image
						src="/static/images/icon/pen.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">昵稱</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.nickname}}</view>
					</view>
				</view>
				<view @click="edit(2)">
					<u-image
						src="/static/images/icon/pen.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">個人介紹</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.bio}}</view>
					</view>
				</view>
				<view @click="edit(3)">
					<u-image
						src="/static/images/icon/pen.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">背景圖</view>
						<view class="warning-bag">*</view>
					</view>
					<view v-if="!form.background" class="item-subtitle" @tap.stop="chooseImg('background')">
						<view style="color: #BEC0C5;font-size: 28rpx;">上傳圖片</view>
					</view>
					<view v-else>
						<u-image
							:src="form.background"
							width="200"
							height="100"
							shape="square"
						></u-image>
					</view>
				</view>
				<view @tap.stop="chooseImg('background')">
					<u-image
						src="/static/images/icon/upload.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">性別</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{channelSexText}}</view>
					</view>
				</view>
				<view @click="showSex=true">
					<u-image
						src="/static/images/icon/right-icon.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">生日</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.birthday}}</view>
					</view>
				</view>
				<view @click="showBirthday=true">
					<u-image
						src="/static/images/icon/right-icon.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">所在區域</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.city}}</view>
					</view>
				</view>
				<view @click="edit(6)">
					<u-image
						src="/static/images/icon/right-icon.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">達人身份</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<view style="color: #BEC0C5;font-size: 28rpx;">{{form.job}}</view>
					</view>
				</view>
				<view @click="edit(7)">
					<u-image
						src="/static/images/icon/right-icon.png"
						width="36rpx"
						height="36rpx"
					></u-image>
				</view>
			</view>
			<qf-image-cropper 
				:width="cropWidth"
				:height="cropHeight"
				:radius="0"
				:navigation="false"
				:src="cropSrc"
				v-show="showCrop"
				@crop="handleCrop"></qf-image-cropper>
		</view>
		
		<u-picker 
			:show="showSex" 
			:columns="sexColumns"
			confirmColor="#27C5D6"
			keyName="title"
			@close="closeSex"
			@cancel="closeSex"
			@confirm="saveSex"
		></u-picker>
		
		<u-datetime-picker
				:show="showBirthday"
				v-model="birthday"
				mode="date"
				confirmColor="#27C5D6"
				:maxDate="Number(new Date())"
				:minDate="hundredYearsAgoTimestamp"
				@close="closeBirthday"
				@cancel="closeBirthday"
				@confirm="saveBirthday"
		></u-datetime-picker>
		
	</view>
</template>

<script>
	import { getUserInfo, profileUser } from '@/config/api.js';
	import { QfImageCropper  } from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	
	export default {
		data() {
			return {
				form:{
					avatar:'',
					orid:'ORID',
					nickname:'社群顯示的昵稱',
					bio:'介紹一下自己',
					sex:'選擇性別',
					birthday:'選擇生日',
					city:'選擇區域',
					job:'輸入達人職稱',
					background:''
				},
				showSex:false,
				sexColumns:[[{id:1,title:'男'},{id:2,title:'女'}]],
				showBirthday:false,
				birthday:'',
				cropType:'',//1頭像，2背景
				cropSrc:'',
				cropWidth:500,
				cropHeight:500,
				showCrop:false,
			}
		},
		components: {
			QfImageCropper
		},
		computed:{
			channelSexText(){
				const sex = this.form.sex;
				if(sex == 1){
					return '男'
				} else if(sex == 2){
					return '女';
				} else {
					return '保密';//默认值，防止意外情况
				}
			},
			hundredYearsAgoTimestamp() {
				const currentDate = new Date();
			    const hundredYearsAgo = new Date(currentDate.getFullYear() - 100, currentDate.getMonth(), currentDate.getDate());
			    return hundredYearsAgo.getTime();
			}
		},
		onLoad(option) {
			// this.getUserInfo()
		},
		onShow(){
			this.getUserInfo()
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			getUserInfo(){
				let that = this;
				getUserInfo().then((res) => {
					//success
					that.form.orid = res.orid;
					that.form.avatar = res.avatar;
					that.form.nickname = res.nickname;
					that.form.bio = res.bio;
					that.form.sex = res.sex;
					that.form.birthday = res.birthday;
					that.form.city = res.address;
					that.form.job = res.job;
					that.form.background = res.background;
				}).catch(() =>{
					
				})
			},
			chooseImg(type){
				let that = this;
				if(type == 'avatar'){
					this.cropType   = 'avatar';
					this.cropWidth  = 200;
					this.cropHeight = 200;
				} else {
					this.cropType   = 'background';
					this.cropWidth  = 500;
					this.cropHeight = 250;
				}
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						that.cropSrc = tempFilePaths[0];
						that.showCrop = true;
					}
				});
			},
			handleCrop(e) {
				//上傳圖片
				// uni.previewImage({
				// 	urls: [e.tempFilePath],
				// 	current: 0
				// });
				let that = this;
				let uploadUrl = uni.$u.http.config.baseURL+'/api/home/upload'
				
				uni.uploadFile({
					url: uploadUrl,
					header: {
					    'Authorization': 'Bearer ' + uni.getStorageSync('token')// 从全局获取token
					},
					filePath: e.tempFilePath,
					name: 'file',
					formData: {
						'type': that.cropType,
						'timestamp': Date.now()
					},
					success: (uploadFileRes) => {
						let data = {};
						const res = JSON.parse(uploadFileRes.data);
						console.log(uploadFileRes)
						if( that.cropType == 'avatar' ){
							that.form.avatar = e.tempFilePath;
							data = {avatar:res.fullurl}
						}else {
							that.form.background = e.tempFilePath;
							data = {background:res.fullurl}
						}
						that.saveImage(data);
					}
				});
				
				this.showCrop = false;
				// console.log(e);
			},
			edit(type){
				let url = '/pages/my/editInfo';
				let data = null;
				if(type == 1){
					data = this.form.orid
				} else if(type == 2){
					data = this.form.nickname
				} else if(type == 3){
					data = this.form.bio
				} else if(type == 4){
					data = this.form.sex
				} else if(type == 5){
					data = this.form.birthday
				} else if(type == 6){
					data = this.form.city
				} else {
					data = this.form.job
				}
				
				uni.navigateTo({
					url: url,
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('res:', data);
							
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						res.eventChannel.emit('initData', { type: type, data:data });
					}
				});
			},
			saveImage(data){
				profileUser(data).then((res) => {
					//success
					uni.showToast({
						icon:'none',
						title:'修改成功'
					})
				}).catch(() =>{
					
				})
			},
			closeSex(){
				this.showSex = false;
			},
			saveSex(e){
				console.log(e.value[0].id)
				let that = this;
				
				let data = {
					sex:e.value[0].id
				}
				profileUser(data).then((res) => {
					//success
					that.form.sex = data.sex;
					uni.showToast({
						icon:'none',
						title:'修改成功'
					})
				}).catch(() =>{
					
				})
				that.showSex = false;
			},
			closeBirthday(){
				this.showBirthday = false;
			},
			saveBirthday(e){
				let that = this;
				
				const dayTime = new Date(e.value);
				const birthday = `${dayTime.getFullYear()}-${(dayTime.getMonth()+1).toString().padStart(2, '0')}-${dayTime.getDate().toString().padStart(2, '0')}`;
				
				let data = {
					birthday:birthday
				}
				profileUser(data).then((res) => {
					//success
					uni.showToast({
						icon:'none',
						title:'修改成功'
					})
					that.form.birthday = birthday
				}).catch(() =>{
					
				})
				
				that.showBirthday = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;
		
		.list-item-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			.item-title{
				display: flex;
				justify-content: flex-start;
				width: 144rpx;
				
				.title{
					color: #232426;
					font-size: 28rpx;
					font-weight: 500;
				}
				.warning-bag{
					color: #FF3D43;
					margin-left: 10rpx;
				}
			}
			.item-subtitle{
				color: #BEC0C5;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
		}
		
	}
	
	.list-item:first-of-type{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	.list-item:last-of-type{
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}
	.container{
		position: relative;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		
		.imgs{
			position: absolute;
			top: 50%;           /* 顶部定位到父容器 50% 位置 */
			left: 50%;          /* 左侧定位到父容器 50% 位置 */
			transform: translate(-50%, -50%); /* 自身宽高的 -50% 偏移 */
			width: 100%;
			text-align: center;
		}
		
		.footer{
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;
			
			.btn{
				color: #FFF;
			}
		}
	}
	.user-search-popup{
		width: 100%;
		background-color: #FAFAFA;
		padding: 24rpx 48rpx;
		box-sizing: border-box;
		
		.search-popup-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			
			.title{
				margin-left: 20rpx;
				font-size: 24rpx;
				color:#232426;
			}
			.highlight {
			  color: #27C5D6; /* 红色高亮 */
			  font-weight: bold; /* 可选：加粗强调 */
			}
		}
	}
	.popup-push-type{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-push-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				color: #808690;
				font-size: 32rpx;
			}
			.title{
				color: #232426;
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				color: #27C5D6;
				font-size: 32rpx;
			}
		}
		.popup-push-body{
			margin-top: 24rpx;
			
			.popup-push-list{
				
				box-sizing: border-box;
				
				.popup-push-item{
					margin-top: 32rpx;
					padding: 20rpx 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background: #F6F8FA;
					border-radius: 120rpx;
					
					.popup-push-icon{
						
					}
					.popup-push-radio{
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
						background-color: #E5E6E8;
					}
					
					.popup-push-text{
						margin-left: 32rpx;
						width: 400rpx;
						
						.title{
							font-size:28rpx;
							font-weight: 600;
						}
						.describe{
							color:#6A707C;
							font-size:24rpx;
						}
					}
					
					.popup-push-arrow{
						margin-left: 32rpx;
					}
					
				}
			}
		}
	}
</style>
